// 导入Observable可观察对象
import { Observable, fromEvent, from, range, of } from 'rxjs';
//  导入ajax对象
import { ajax } from 'rxjs/ajax';

// 导入operator
import { map, catchError } from 'rxjs/operators';

// 01-创建一个最基本的可观察对象
const obs$ = new Observable((observer) => {
    // observer.next用来发布数据, 只有当当前的observer可观察对象被订阅的时候, 才会发布
    // 数据通过实参来发布
    observer.next({ name: 'zs', age: 30, gender: '男' });
    // 抛出异常错误; 抛出异常后complete将不会再执行
    observer.error(new Error('获取数据出错'));
    // 通知订阅者, 数据发布完成
    observer.complete('complete');
});

obs$.subscribe({
    // 接收发布者发布的数据, 通过形参来接收
    next(data) {
        console.log(data);
    },
    // 捕获发布者抛出的异常错误
    error(err) {
        console.log(err);
    },
    // 数据接收完毕回调函数, 
    // 只有当发布者调用了observer.complete()方法值后, 此处的complete才会执行
    complete(data) {
        console.log('complete', data);
    }
});



// 02-通过rxjs提供的ajax实现数据请求
const url = 'http://106.13.182.88:8081/get.php';
// const response$=ajax(url);
// response$.subscribe({
//     next({response}){
//         console.log(response);
//     }
// });

// 02-01-getJSON
// const response$ = ajax.getJSON(url);
// response$.subscribe((res) => {
//     console.log(res, 1111);
// });
// 02-02-post
const postUrl = 'http://106.13.182.88:8081/post.php';
const post$ = ajax({
    url: postUrl,
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'rxjs-custom-header': 'Rxjs'
    },
    body: {
        rxjs: 'Hello World!'
    }
})
post$.subscribe(({ response }) => {
    console.log(response);
});

// 03-fromEvent()将事件转换成Observable了观察对象
const btn = document.querySelector('#btn');
const btn$ = fromEvent(btn, 'click');
btn$.subscribe({
    next(data) {
        console.log(data);
        // 设置成禁用状态, 实现只能点击一次
        btn.setAttribute('disabled', '')
    }
});

// 04-from()将其对象转化成Observable可观察对象
// 可以传入Observable, Array, Promise, Iterable
const obj$ = from([100, 200]);
obj$.subscribe({
    next(data) {
        console.log(data);
    }
});

// 05-range()创建一个可迭代的Observable可观察对象
const range$ = range(1, 4);
range$.subscribe((data) => {
    console.log(data);
});

// 05-of()创建一个可迭代的Observable可观察对象
const of$ = of(1, 20, 1024);
of$.subscribe((data) => {
    console.log(data);
});

